<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="author" content="huaicheng151201@163.com"/>
    <meta name="keywords" content="HTML,PHP,SQL"/>
    <meta name="description" content=""/>
    <meta name="revised" content=""/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <meta http-equiv="Cache-Control" content="no-transform"/>
    <meta name="apple-touch-fullscreen" content="yes"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="msapplication-tap-highlight" content="no"/>
    <title>天籁之音</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/header.css">
    <link rel="stylesheet" href="css/share.css">
    <link rel="stylesheet" href="css/audio.css">

</head>
<body class="bg_hd">
    <header></header>
    <section>
        <!--banner-->
        <div id="banner" style=""></div>
        <!--热门单曲-->
        <div class="hot_music">
            <div class="music_title">
                <span>热门单曲</span><span><img src="images/vision_more.png" alt="" style="width:20%;"></span>
            </div>
            <ul class="music_con"  id="j-hot-song">



            </ul>
        </div>
        <!--热门歌手-->
        <div class="hot_singer">
            <div class="singer_title">
                <span>热门歌手</span><span><img src="images/vision_more.png" alt="" style="width:20%;"></span>
            </div>
            <ul class="singer_con" id="j-hot-singer">

                
            </ul>
        </div>

        <!--图标-->
        <p class="icon j-open-player"><img src="images/listen_icon.png" alt=""></p>
    </section>
    <div class="mask hide"></div>
    <div class="player-box hide"  id="player">
        <div class="player-list">
            <ul>

            </ul>
        </div>
        <div class="progress-wrapper">
            <span class="ticker cur"></span>
            <div class="progress">
                <div class="bar noUi-target noUi-ltr noUi-horizontal noUi-connect"><div class="noUi-base">
                    <div class="noUi-origin noUi-background noUi-stacking"><div class="noUi-handle noUi-handle-lower"></div></div></div></div>
            </div>
            <span class="duration j-duration"></span>
        </div>
        <p id="tip-cnetent"></p>
        <div class="col-6 iconcenter">
            <div class="iconfont icon-prev">&#xe60c;</div>
            <div class="iconfont icon-play-pause">&#xe600;</div>
            <div class="iconfont icon-play hide">&#xe607;</div>
            <div class="iconfont icon-next">&#xe611;</div>
        </div>
    </div>
    <audio id="h5audio_media" height="0" width="0" onerror="" src=""></audio>
    <!--功能及分享弹出框-->
    <div class="listen_box"></div>
    <script src="js/baseInfo.js"></script>
    <script src="js/jquery-1.12.0.min.js"></script>
    <script src="js/touch.0.2.14.min.js"></script>
    <script src="js/lib/template.min.js"></script>
    <script src="js/reqeust.js"></script>
    <script src="js/player.js"></script>
    <script src="js/dmui-banner.js"></script>
    <script>
        $(function () {
            var title = "",subtitle="",log="";
            $("header").load("header.html"); //引入共用的header
            baseInfo.pageNumber = 2; // 给当前页面的导航加上 .active
            $(".listen_box").load("share.html");
            //获取大banner
            sendByUrl("/GetBigBannerList",{blockNum:2},function(res){
                var datas = [],item;
                if(typeof res.data !="string" && res.data.length > 0){
                    for(var i=0;i<res.data.length;i++){
                        item = res.data[i];
                        datas.push({
                            title:item.Banner_Title,
                            id:item.id,
                            img:configCommon.pic+item.Banner_Img,
                            href: item.Banner_Href
                        })
                    }
                    // banner
                    $.banner({
                        id : "banner",
                        btnGroup : false, // 隐藏左右按钮组
                        data : datas
                    });
                }
                
            });
            //热门歌手
            sendByUrl("/GetHotSinger",{pageIndex:1,pageSiz:8},function(res){
                $("#j-hot-singer").append(template("singer-list-temp", {
                    list: res || []
                }));
            });
            //热门单曲
            sendByUrl("/GetHotMusic",{pageindex:1,pagesize:5},function(res){
                $("#j-hot-song").append(template("song-list-temp", {
                    list: res || []
                }));
            });
            // 显示功能及分享弹出框
            $("body").on(clickevent,".fun",function () {
                var obj = $(this).parents("li");
                title = obj.find(".title").text().trim();
                subtitle = obj.find(".name").text().trim();
                log = obj.find("img").attr("src");
                $(".box").removeClass("hide")
                $(".j-share-download").find("a").attr("href",$(this).parents("li").find(".j-add-to-player").attr("data-mp3").trim());
                $(".j-share-singer").attr("data-singerId",$(this).attr("data-singerId"));
                $(".j-share-mv").attr("data-singerId",$(this).attr("data-singerId"));

            });
            // 热门单曲
            $(".music_title span:nth-child(2)").on(clickevent,function () {
                window.location.href='hot_song.html';
            });
            // 热门歌手
            $(".singer_title span:nth-child(2)").on(clickevent,function () {
                window.location.href='hot_singer.html';
            });
            //歌手详情
            $("#j-hot-singer").on(clickevent,"li",function(){
                var _id = $(this).data("id");
                location.href = "singer_album.html?id="+_id;
            });
            $("body").on(clickevent,".share_item",function () {
                var id = $(this).attr("data-id");

                shareInfo(title,subtitle,location.href,log,id);
            });
            $("body").on(clickevent,".link-items",function () {
                var url = $(this).data("href");
                if(url){
                    openWebInfoUrl(url);
                }
            });
        });
    </script>
   <!--热门单曲-->
    <script id="song-list-temp" type="text/html">
        {{each list as item i}}
        <li data-id="{{item.id}}">
            <div>
                {{if item.singer && item.singer.length > 0}}
                <img src="{{item.singer[0].img_url}}" alt="{{item.singer[0].name}}" style="width:100%;height:40px;">
                {{/if}}
            </div>
            <div>
                <p data-mp3="
                {{if item.path128 && item.path128.indexOf('.mp3') > -1}}
                    {{item.path128}}
                {{else if item.path192 && item.path192.indexOf('.mp3') > -1}}
                    {{item.path192}}
                {{else if item.path320 && item.path320.indexOf('.mp3') > -1}}
                    {{item.path320}}
                {{/if}}" class="j-add-to-player title_box">
                    <span class="title">{{item.mp3Name}}
                        {{if item.HQ}}
                        <b class="hq"></b>
                        {{/if}}
                        {{if item.MV}}
                        <b class="mv"></b>
                        {{/if}}
                    </span>
                    {{if item.singer && item.singer.length > 0}}
                    <span class="name">{{item.singer[0].name}}</span>
                    {{/if}}
                </p>
                <p class="fun" data-singerId="{{if item.singer && item.singer.length > 0}}{{item.singer[0].id}}{{/if}}">
                    <img src="images/function.png" alt="" style="width:10%;"></p>
            </div>
        </li>
        {{/each}}
    </script>
   <!--热门歌手-->
    <script id="singer-list-temp" type="text/html">
        {{each list as item i}}
        <li data-id="{{item.id}}">
            <img alt="{{item.name}}" src="{{item.head}}" alt="">
            <span>{{item.name}}</span>
        </li>
        {{/each}}
    </script>
</body>
</html>